<template>
  <el-container id="lianBox">
    <el-aside>
      <div class="folderTree" @click="witchNetWorkClick(0)">
        <img src="../assets/img/lian/Partner.png">
        <span :class="witchNetwork==0? 'is-active':''">合作伙伴</span>
      </div>
      <div class="folderTree" @click="witchNetWorkClick(1)">
        <img src="../assets/img/lian/company.png">
        <span :class="witchNetwork==1? 'is-active':''">全部公司</span>
      </div>
      <div class="folderTree" @click="witchNetWorkClick(2)">
        <img src="../assets/img/lian/note.png">
        <el-badge v-if="newsNum>0" :value="newsNum" class="item">
          <span :class="witchNetwork==2? 'is-active':''">消息通知</span>
        </el-badge>
        <span v-else :class="witchNetwork==2? 'is-active':''">消息通知</span>
      </div>
    </el-aside>
    <el-container>
      <el-main>
        <el-container class="network">
          <el-header style="border:1px solid #F6F6F6;height: 54px;background: white">
            <el-row>
              <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
              <el-breadcrumb separator-class="el-icon-arrow-right" class="tit">
                <el-breadcrumb-item>
                  <i @click="goBack" :class="currentIndex == 0 ? 'current':''">{{theTab}}</i>
                </el-breadcrumb-item>
                <el-breadcrumb-item v-if="linkShow">
                  <i :class="currentIndex == 1 ? 'current':''">{{contactIfo}}</i>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-row>
            <el-row>
              <el-button class="refresh" @click="refresh" icon="el-icon-refresh" plain></el-button>
            </el-row>
          </el-header>
          <el-main v-show="isOut" class="fileInfo">
            <el-header v-if="witchNetwork==2">
              <span @click="fromPartner" :class="isFromPartner==true? 'is-from-me':''">合作请求</span>
              <span class="center-span">|</span>
              <span @click="toPartner" :class="isFromPartner==false? 'is-from-me':''">我发出的</span>
            </el-header>
            <el-table
              size="small"
              :data="tableData"
              align="center"
              header-align="center"
              v-loading="listLoading"
              element-loading-text="获取链上公司列表中"
              style="width: 100%;font-family:'宋体';text-align:center"
            >
              <el-table-column align="center" header-align="center" prop="name" label="公司名称"></el-table-column>
              <el-table-column label="身份ID" align="center" header-align="center">
                <template slot-scope="scope">
                  <hover-copy
                    :item="scope.row.identity"
                    label="身份ID"
                    :itemShow="scope.row.identityShow"
                  ></hover-copy>
                </template>
              </el-table-column>
              <el-table-column label="账户公钥" align="center" header-align="center">
                <template slot-scope="scope">
                  <hover-copy
                    :item="scope.row.publicKey"
                    label="账户公钥"
                    :itemShow="scope.row.publicKeyShow"
                  ></hover-copy>
                </template>
              </el-table-column>
              <el-table-column align="center" header-align="center" prop="createTime" label="加入时间"></el-table-column>
              <el-table-column label="操作" align="center" header-align="center">
                <template slot-scope="scope">
                  <span v-if="witchNetwork==0" @click="getInfo(scope.row)" class="is-active">来往信息</span>
                  <span
                    v-if="witchNetwork==1&&scope.row.statusStyle=='unread'"
                    @click="addPartner(scope.row)"
                    :class="[scope.row.statusStyle]"
                    :disabled='scope.row.statusStyle=="readed"'
                  >{{scope.row.statusShow}}</span>
                  <span
                    v-if="witchNetwork==1&&scope.row.statusStyle=='readed'"
                    :class="[scope.row.statusStyle]"
                    :disabled='scope.row.statusStyle=="readed"'
                  >{{scope.row.statusShow}}</span>
                  <span
                    v-if="witchNetwork==2&&isFromPartner"
                    @click="okPartner(scope.row)"
                    class="is-active"
                  >{{scope.row.statusShow}}</span>
                  <span
                    v-if="witchNetwork==2&&!isFromPartner"
                    :class="[scope.row.statusStyle]"
                  >{{scope.row.statusShow}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-main v-show="!isOut" class="fileInfo">
            <el-header>
              <span @click="getFromMe" :class="isFromMe==true? 'is-from-me':''">我传出的</span>
              <span class="center-span">|</span>
              <span @click="getToMe" :class="isFromMe==false? 'is-from-me':''">传给我的</span>
            </el-header>
            <el-main>
              <el-table
                size="small"
                :data="fileData"
                v-loading="listLoading"
                element-loading-text="获取链上往来信息中"
                style="width: 100%;font-family:'宋体'"
              >
                <el-table-column
                  width="210"
                  prop="fileName"
                  label="文件名"
                  align="center"
                  header-align="center"
                >
                  <template slot-scope="scope">
                    <div class="folder-box" @click="handleCellClick(scope.row)">
                      <div style="display: flex;align-items: center">
                        <span :class="'file-icon '+scope.row.iconcls"></span>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          v-if="scope.row.fileName && $abslength(scope.row.fileName) > 24"
                          :content="scope.row.fileName"
                          placement="top-start"
                        >
                          <span
                            class="file-name"
                          >{{ scope.row.fileName.substring(0,$getFontShowLength(scope.row.fileName,24))+'...'}}</span>
                        </el-tooltip>
                        <span v-else class="file-name">{{scope.row.fileName}}</span>
                      </div>
                      <div class="folder-box-options">
                        <el-popover placement="right" width="90" trigger="hover">
                          <ul class="settingOptions">
                            <li @click.stop @click="downloadFile(scope.row)">
                              <i class="fa fa fa-cloud-download" aria-hidden="true"></i>下载
                            </li>
                            <li @click.stop @click="previewFile(scope.row)">
                              <i class="fa fa-file" aria-hidden="true"></i>
                              预览
                            </li>
                          </ul>
                          <i
                            slot="reference"
                            class="el-icon-more-outline"
                            style="cursor: pointer; font-weight: bold"
                            @click.stop
                          ></i>
                        </el-popover>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="fileName" label="文件名">
                </el-table-column>-->
                <el-table-column
                  align="center"
                  header-align="center"
                  prop="createTime"
                  label="链通时间"
                  width="135"
                ></el-table-column>
                <el-table-column align="center" header-align="center" prop="fileHash" label="文件摘要">
                  <template slot-scope="scope">
                    <hover-copy
                      :item="scope.row.fileHash"
                      label="文件摘要"
                      :itemShow="scope.row.fileHashShow"
                    ></hover-copy>
                  </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" label="链通编号">
                  <template slot-scope="scope">
                    <hover-copy
                      :item="scope.row.txHash"
                      label="链通编号"
                      :itemShow="scope.row.txHashShow"
                      canIcli='is-active'
                    ></hover-copy>
                  </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" label="文件状态"  v-if="isFromMe">
                  <template slot-scope="scope">
                    <span :class="[scope.row.statusStyle]">{{scope.row.statusShow}}</span>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <div
                      v-if="$store.state.lianLoadingList.length>0&&$store.state.lianLoadingList[0].fileHash==scope.row.fileHash"
                    >
                      <span>正在下载中：</span>
                      <el-progress
                        :percentage="$store.state.lianLoadingList[0].percentComplete"
                        :show-text="true"
                      ></el-progress>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <el-dialog title="提示" :visible.sync="addPartnerDialog" width="30%">
      <span>是否向{{addPartnerd.name}}发起合作请求</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPartnerDialog = false">取 消</el-button>
        <el-button type="primary" @click="commitAddPartner()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="okPartnerDialog" width="30%">
      <span>是否接收来自{{addPartnerd.name}}的合作请求</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="okPartnerDialog = false">取 消</el-button>
        <el-button type="primary" @click="commitOkPartner()">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import HoverCopy from "../components/HoverCopy";
var companyId = localStorage.getItem("companyId");
export default {
  name: "Lian",
  inject: ["reloadHome"],
  components: { HoverCopy },
  data() {
    return {
      theTab: "合作伙伴",
      witchNetwork: 0,
      companys: [],
      addCompanys: [],
      tableData: [],
      listLoading: true,
      contactIfo: "",
      fromMe: [],
      toMe: [],
      fileData: [],
      isOut: true,
      linkShow: false,
      isFromMe: true,
      currentIndex: 0,
      percentComplete: 0,
      partner: [],
      partnerRequest: [],
      partnerResponse: [],
      isFromPartner: true,
      addPartnerDialog: false,
      okPartnerDialog: false,
      addPartnerd: {},
      newsNum: 0
    };
  },
  //     components: {PersonConfig, NetworkConfig},
  computed: {
    ...mapState(["searchInput","canSearch"])
  },
  created() {
    this.$store.state.canSearch = true;
    this.$store.state.placeHolder = "当前模块不可搜索";
    this.getPantner();
    this.getPantnerResponse();
    this.addPartnerd.name='';
  },
  methods: {
    // todo 1.搜索提示修改；2.获取全部和经常的数据。3.切换全公司和经常访问
    refresh() {
      this.reloadHome();
    },
    selsChange(sels) {
      this.sels = sels;
    },
    copyItem() {
      const input = document.createElement("input");
      input.style.opacity = "0";
      input.setAttribute("value", this.item);
      document.body.appendChild(input);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        this.$message({
          message: this.label + "复制成功",
          type: "success"
        });
      } else {
        this.$message({
          message: "复制失败，请使用现代浏览器。 eg.chrome",
          type: "error"
        });
      }
    },
    // 切换全公司和经常访问
    witchNetWorkClick(i) {
      console.log(i);
      this.isOut=true;
      this.witchNetwork = i;
      if (this.witchNetwork == 0) {
        this.tableData = this.partner;
        this.theTab = "合作伙伴";
      } else if (this.witchNetwork == 1) {
        this.getCompanys();
        this.theTab = "全部公司";
        this.tableData = this.companys;
      } else {
        this.theTab = "消息中心";
        this.tableData = this.partnerRequest;
      }
    },
    // 将字符串数据缩略
    toShow(s, a = 21) {
      let beforeS = s.slice(0, a);
      let afterS = s.substr(-6);
      return beforeS + "......" + afterS;
    },
    // 获取伙伴和别人发来的伙伴请求
    getPantner() {
      this.$http.get("/company/getPartner").then(res => {
        this.partner = [];
        this.partnerRequest = [];
        console.log(res);
        if (res.status == 200) {
          let { data } = res;
          if (data != false) {
            data.forEach(val => {
              val.publicKeyShow = this.toShow(val.publicKey);
              val.identityShow = this.toShow(val.identity);
              if (val.status == "1") {
                this.partner.push(val);
              } else {
                val.statusShow = "同意添加";
                this.partnerRequest.push(val);
              }
              // val.statusShow=val.status==1 ? '已同意':'同意';
              // 加样式;
            });
            this.newsNum = this.partnerRequest.length;
            this.tableData = this.partner;
          }
        }
        this.listLoading = false;
      });
    },
    getPantner1() {
      this.$http.get("/company/getPartner").then(res => {
        this.partner = [];
        this.partnerRequest = [];
        console.log(res);
        if (res.status == 200) {
          let { data } = res;
          if (data != false) {
            data.forEach(val => {
              val.publicKeyShow = this.toShow(val.publicKey);
              val.identityShow = this.toShow(val.identity);
              if (val.status == "1") {
                this.partner.push(val);
              } else {
                val.statusShow = "同意添加";
                this.partnerRequest.push(val);
              }
              // val.statusShow=val.status==1 ? '已同意':'同意';
              // 加样式;
            });
            this.newsNum = this.partnerRequest.length;
            this.tableData = this.partnerRequest;
          }
        }
        this.listLoading = false;
      });
    },
    // 获取发出去伙伴请求的响应信息
    getPantnerResponse() {
      this.partnerResponse = [];
      this.$http.get("/company/getAddRequest").then(res => {
        console.log(res);
        let { data } = res;
        if (data != false) {
          data.forEach(val => {
            val.publicKeyShow = this.toShow(val.publicKey);
            val.identityShow = this.toShow(val.identity);
            val.statusShow = val.status == "1" ? "添加成功" : "等待对方同意";
            val.statusStyle = val.status == "1" ? "unread" : "readed";
            this.partnerResponse.push(val);
          });
        }
        this.listLoading = false;
      });
    },
    // 获取全公司数据
    getCompanys() {
      this.listLoading = true;
      let _this=this;
      this.$http.get("/company/getChainCompanyList").then(res => {
        _this.companys = [];
        console.log(res);
        if (res.status == 200) {
          let { data } = res;
          if (data != false) {
            data.forEach(val => {
              val.publicKeyShow = _this.toShow(val.publicKey);
              val.identityShow = _this.toShow(val.identity);
              if (_this.partner != false) {
                let index;
                for (index = 0; index < _this.partner.length; index++) {
                  if (_this.partner[index].identity == val.identity) {
                    val.statusShow = "已添加";
                    val.statusStyle = "readed";
                    break;
                  }
                  if (index == _this.partner.length - 1) {
                    if(_this.partnerResponse.length>0){
                      for (let i = 0; i < _this.partnerResponse.length; i++) {
                      console.log(_this.partnerResponse[i].identity);
                      if (_this.partnerResponse[i].identity == val.identity) {
                        val.statusShow = "等待同意";
                        val.statusStyle = "readed";
                        break;
                      }
                      if (i == _this.partnerResponse.length - 1) {
                        val.statusShow = "添加为合作伙伴";
                        val.statusStyle = "unread";
                      }
                    }
                    }else{
                      val.statusShow = "添加为合作伙伴";
                        val.statusStyle = "unread";
                    }
                  }
                }
              } else {
                if(_this.partnerResponse.length>0){
                  for (let i = 0; i < _this.partnerResponse.length; i++) {
                      console.log(_this.partnerResponse[i].identity);
                      if (_this.partnerResponse[i].identity == val.identity) {
                        val.statusShow = "等待同意";
                        val.statusStyle = "readed";
                        break;
                      }
                      if (i == _this.partnerResponse.length - 1) {
                        val.statusShow = "添加为合作伙伴";
                        val.statusStyle = "unread";
                      }
                    }
                }else{
                  val.statusShow = "添加为合作伙伴";
                        val.statusStyle = "unread";
                }

              }
              this.companys.push(val);
            });
          }
          this.tableData = this.companys;
        }
        console.log(this.tableData);
        this.listLoading = false;
      });
      // .catch(error => {
      //   this.listLoading = false;
      //   this.tableData=[];
      //   this.$message.error("网络错误，服务器无响应");
      // });
    },
    // 向一个公司发送添加为合作伙伴的要求
    addPartner(row) {
      this.addPartnerd = row;
      this.addPartnerDialog = true;
      console.log(1)
    },
    // 确认提交
    commitAddPartner() {
      this.$http
        .post("/company/addPartner", {
          userAccount: this.addPartnerd.identity,
        })
        .then(res => {
          if (res.status == 200) {
            this.$message.success("发送成功，等待对方同意");
          }
          this.addPartnerDialog = false;
          this.addPartnerd.statusShow='等待对方同意';
          this.addPartnerd.statusStyle='readed'
          this.partnerResponse.push(this.addPartnerd);
          this.addPartnerd={};
          this.getCompanys();
        });
    },
    okPartner(row) {
      this.addPartnerd=row;
      this.okPartnerDialog = true;
    },
    // 确认添加
    commitOkPartner() {
      this.$http
        .post("/company/agreePartner", {
          userAccount: this.addPartnerd.identity,
        })
        .then(res => {
          if (res.status == 200) {
            this.$message.success("添加合作伙伴成功");
          }
          this.getPantner1();
          this.addPartnerd={};
          this.okPartnerDialog = false;
        });
    },
    // 获取我传的数据
    getFTMe(id, type) {
      this.listLoading = true;
      this.$http
        .post("/chainShare/getShareList", {
          userId: id,
          type: type
        })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            let { data } = res;
            if (data != false) {
              if (type == 1) {
                data.forEach(val => {
                  val.fileHashShow = this.toShow(val.fileHash, 12);
                  val.txHashShow = this.toShow(val.txHash, 12);
                  if (val.status == "1") {
                    val.statusShow = "对方已查阅";
                    val.statusStyle = "readed";
                  } else {
                    val.statusShow = "对方未查阅";
                    val.statusStyle = "unread";
                  }
                  this.fromMe.push(val);
                });
                this.getFromMe();
                this.listLoading = false;
              } else {
                data.forEach(val => {
                  val.fileHashShow = this.toShow(val.fileHash, 6);
                  val.txHashShow = this.toShow(val.txHash, 6);
                  this.toMe.push(val);
                });
              }
              console.log(this.toMe);
              console.log(this.toShow);
            }else{
              this.getFromMe();
              this.listLoading = false;
            }
          }
        })
        .catch(error => {
          this.listLoading = false;
          this.$message.error("网络错误，服务器无响应");
        });
    },
    getFromMe() {
      this.isFromMe = true;
      this.fileData = this.fromMe;
    },
    getToMe() {
      this.isFromMe = false;
      this.fileData = this.toMe;
    },
    // 别人发来的合作信息
    fromPartner() {
      this.isFromPartner = true;
      this.tableData = this.partnerRequest;
    },
    // 我发出的合作信息
    toPartner() {
      this.isFromPartner = false;
      this.tableData = this.partnerResponse;
    },
    downloadFile(file) {
      let url =
        this.isFromMe == true
          ? this.$store.state.ipfsArray[1] + "ipfs/" + file.fileHash
          : file.fileUrl;
      let methodType=file.fileSize>1000000000 ? 0 : 1;
      if (this.$store.state.ipfsArray[1] == 0) {
        this.$message.error("获取请求路径失败,请检查网络或呼叫管理员");
      } else {
        if (methodType) {
          if (this.$store.state.lianLoadingList.length > 0) {
        this.$message.warning("请等待当前文件下载完成后，再执行下载操作。");
        return;
      }
      let obj = {
        fileHash: file.fileHash,
        percentComplete: 0
      };
      this.$store.commit("setLianLoadingList", [obj]);
          this.getBlob(url).then(blob => {
            this.$store.commit("setLianLoadingList", []);
            this.saveAs(blob, file.fileName, true);
          });
        } else {
          this.$message({
            type:'warning',
            message:'大文件需专用通道匿名加速下载，下载后请手动重命名',
            duration:'5000'
          })
          this.saveAs(url, file.fileName);
        }
      }
    },
    getType(filename) {
      var index1 = filename.lastIndexOf(".");
      var index2 = filename.length;
      var type = filename.substring(index1 + 1, index2);
      return type;
    },
    getBlob(url) {
      let _this = this;
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        console.log(_this.$store.state.lianLoadingList[0]);
        let obj = _this.$store.state.lianLoadingList[0];
        xhr.addEventListener(
          "progress",
          function(evt) {
            if (evt.lengthComputable) {
              obj.percentComplete = Math.round(
                (evt.loaded / evt.total).toFixed(2) * 100
              );
              console.log(1);
              _this.$store.commit("setLianLoadingList", [obj]);
            }
          },
          false
        );
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };
        xhr.send();
      });
    },
    saveAs(url, filename, isArr) {
      if (window.navigator.msSaveOrOpenBlob && isArr === true) {
        navigator.msSaveBlob(url, filename);
      } else {
        const link = document.createElement("a");
        const body = document.querySelector("body");
        if (isArr === true) {
          link.href = window.URL.createObjectURL(url);
        } else {
          link.href = url;
        }
        link.download = filename;
        link.type = "application/octet-stream";
        console.log(link.download);
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
    previewFile(file) {
      console.log(file);
      file.suffix = this.getType(file.fileName);
      let url =
        this.isFromMe == true
          ? this.$store.state.ipfsArray[1] + "ipfs/" + file.fileHash
          : file.fileUrl;
      let arr = ["png", "jpg", "pdf", "gif", "txt"];
      if (arr.indexOf(this.getType(file.fileName)) != -1) {
        if (this.$store.state.ipfsArray == 0) {
          this.$message.error("获取请求路径失败,请检查网络或呼叫管理员");
        } else {
          this.getBlob(url).then(blob => {
            this.imgurl = window.URL.createObjectURL(blob);
            console.log(this.imgurl);
            if (this.imgurl != "") {
              window.open(this.imgurl, "_blank");
            }
          });
        }
      } else if (
        file.suffix.toLowerCase() == "mp4" ||
        file.suffix.toLowerCase() == "webm" ||
        file.suffix.toLowerCase() == "ogg"
      ) {
        var page = window.open();
        var html = `<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style='width:980px;height: 480px'>
                            <video  style='width:980px;height: 480px' controls width='100%' autoplay id="playVideo">
                                <source class="source" src=${url} type="video/mp4">
                            </video>
                        </div>
                    </body>`;
        page.document.write("<title>视频预览</title>" + html);
      } else if (file.suffix.toLowerCase() == "flv") {
        let data = url;
        let data1 =
          "vcastr_file=" +
          data +
          "&LogoText=ÊÓÆµ²¥·ÅÆ÷&BufferTime=3&IsAutoPlay=1";
        let data2 = "vcastr_file=" + data + "&LogoText=ÊÓÆµ²¥·ÅÆ÷&IsAutoPlay=1";
        var page = window.open();
        var html = `<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style="width: 100%;height:100%;display: flex;justify-content: center;align-items: center;background: black">
                            <object class id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=${data} width="980" height="480" style="border: 1px solid #549de8">
                                <param name="movie" value="/static/flvplayer.swf">
                                <param name="quality" value="high">
                                <param name="allowFullScreen" value="true">
                                <param name="FlashVars" value=${data1}>
                                <embed src="/static/flvplayer.swf" allowfullscreen="true" flashvars=${data2} quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="480"></embed>
                            </object>
                        </div>
                    </body>`;
        page.document.write("<title>视频预览</title>" + html);
        // let routeUrl = this.$router.resolve({
        //   path: "/videoPlay",
        //   query: {url:url}
        // });
        // window.open(routeUrl.href, '_blank');
      } else {
        this.$message("当前文件不支持预览，请下载查看");
      }
    },
    getType(file) {
      console.log(file);
      var filename = file;
      var index1 = filename.lastIndexOf(".");
      var index2 = filename.length;
      var type = filename.substring(index1 + 1, index2);
      console.log(type);
      return type;
    },
    // 表格每一行绑定事件，获取与该公司的往来信息
    getInfo(row) {
      this.contactIfo = row.name;
      this.linkShow = true;
      this.isOut = false;
      this.currentIndex = 1;
      this.fromMe = [];
      this.toMe = [];
      this.getFTMe(row.identity, 0);
      this.getFTMe(row.identity, 1);
    },
    // 从获取往来信息界面返回
    goBack() {
      this.contactIfo = "";
      this.linkShow = false;
      this.isOut = true;
      this.currentIndex = 0;
    }
  }
};
</script>

<style scoped lang="scss">
@import "scss_vars";
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
  width: 0;
  opacity: 0;
}

#lianBox {
  overflow: hidden;
  position: absolute;
  margin-left: 120px;
  top: 80px;
  bottom: 0;
  left: 0;
  right: 0;
  .is-active {
    color: #549de8;
    cursor: pointer;
  }
  .readed {
    color: #71a0a5;
  }
  .unread {
    color: #4be3ac;
  }
  .is-from-me {
    color: #549de8;
    text-decoration: underline;
  }
  cursor: default;
  .el-aside {
    border-right: 1px solid #eee;
    padding-top: 10px;
    flex: 0 0 200px;
    background: $main-bg;
    height: 100%;
    width: 200px !important;
    overflow-y: auto;
    overflow-x: auto;
    text-align: center;
    img {
      margin-right: 10px;
      width: 20px;
    }
    p {
      margin-top: 20px;
      // color: rgba(84, 157, 232, 1);
      color: #b4b4b4;
    }

    .folderTree {
      display: flex;
      align-items: center;
      padding: 10px 0 10px 37px;
      color: #666;
    }
    .folderTree:hover {
      cursor: pointer;
      /*text-decoration:underline;*/
    }
  }
  .el-main {
    padding: 0 !important;
    margin: 0 !important;
  }
  .network {
    .el-header {
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: $main-bg !important;
      .el-row {
        display: flex;
        align-items: center;
        .el-button {
          padding: 10px;
          width: 82px;
        }
        .tit {
          line-height: 54px;
          padding-left: 20px;
          border-left: 1px solid #eee;
          margin-left: 20px;
          i:hover {
            text-decoration: underline;
            cursor: pointer;
          }
          .current {
            color: #2b2b2b;
            font-weight: 900;
          }
        }
        .el-button-group {
          .el-button {
            padding: 10px;
            width: 42px;
          }
          .focus {
            background: #549de8;
            border-color: #409eff;
            color: #fff;
          }
        }
        .refresh {
          margin-left: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 42px;
          height: 36px;
        }
      }
    }
    .fileInfo {
      .el-header {
        display: block;
        text-align: center;
        height: 40px !important;
        line-height: 40px;
        background-color: #e6ebf5 !important;
      }
      span {
        cursor: pointer;
      }
      .center-span {
        padding: 0 15px;
        cursor: default;
      }
    }
    .el-main {
      background: white;
      padding: 0;
      .el-table {
        margin-top: 10px;
      }
    }
    .currentSearch {
      width: 180px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .folder-box {
      display: flex;
      justify-content: space-between;
    }
    .folder-box-options {
      display: none;
    }
    .folder-box:hover .folder-box-options {
      display: inline-block;
      font-weight: 700;
    }
  }
}
#box,
#edit {
  .search {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    .label {
      align-self: center;
    }
    .choose {
      display: flex;
      width: 50px;
      align-self: center;
      justify-content: flex-end;
    }
  }
  .s2 {
    width: 528px;
  }
  .l1 {
    .el-input__inner {
      width: 180px;
    }
  }
  .author {
    .el-radio-group {
      display: flex;
      justify-content: space-around;
      align-items: center;
      line-height: 40px;
    }
  }
  .btn {
    display: flex;
    margin-top: 20px;
    padding: 0 150px;
    justify-content: space-between;
  }
}
.block {
  display: flex;
  margin-top: 40px;
  margin-bottom: 20px;
  .smallBtn {
    margin: 0 20px;
    width: 25%;
  }
}
</style>
<style lang="scss">
#lianBox {
  @import "scss_vars";
}
</style>
